<template>
	<view>
		<!--主体-->
		<view class="meMain">
				<view class="meMainBox">
					<!--订单-->
						<view class="meOverBg">
						<view class="meVisitorTitle">高级游戏</view>
						<view class="meVisitor">
							<view class="meOrderLt wd left bg1" @click="pay(1)">
								<view class="meOrderTxt_02">100单</image></view>
								<view class="meOrderTxt_02">待操作</view>
							</view>
							<view class="meOrderLt wd right bg2"  @click="pay(2)">
								<view class="meOrderTxt_02">159单</image></view>
								<view class="meOrderTxt_02">待好评</view>
							</view>
						</view>
						<view class="meVisitor" style="margin: 10px 0 10px 0;">
							<view class="meOrderLt wd left bg3"  @click="pay(3)">
								<view class="meOrderTxt_02">759单</view>
								<view class="meOrderTxt_02">审核中</view>
							</view>
							<view class="meOrderLt wd right bg4"  @click="pay(4)">
								<view class="meOrderTxt_02">0单</view>
								<view class="meOrderTxt_02">申述中</view>
							</view>
						</view>
					</view>
					<!--订单-->

			<!--订单-->
				<view class="meOverBg" style="padding-bottom: 15px;">
				<view class="meVisitorTitle">流量游戏</view>
				<view class="meVisitor">
					<view class="meOrderLt liu bg5" style="margin-left: 10px;"  @click="view(1)">
						<view class="meOrderTxt_02">206单</view>
						<view class="meOrderTxt_02">待操作</view>
					</view>
					<view class="meOrderLt liu bg6"  @click="view(2)">
						<view class="meOrderTxt_02">636单</view>
						<view class="meOrderTxt_02">处理中</view>
					</view>
					<view class="meOrderLt liu bg7" style="margin-right: 10px;"  @click="view(3)">
						<view class="meOrderTxt_02">300单</view>
						<view class="meOrderTxt_02">申述中</view>
					</view>
	
				</view>
			</view>
			<!--订单-->


				</view>
		
		</view>
		<!--主体-->

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		onShow() {



		},
		methods: {
          pay:function(e){
			 uni.navigateTo({
			 	url:"pay"
			 }) 
		  },
		  view:function(e){
			 uni.navigateTo({
			 	url:"view"
			 })  
		  }

		}
	}
</script>

<style>
	page {
		background: #F5F5F5;
	}

	.meMain {
		width: 100%;
		position: relative;
	}

	.meMain>image {
		width: 100%;
		height: 220upx;
		display: block;
	}

	.meMainBox {
		width: 92%;
		margin: 0 auto 80px;
	}


	.meHead {
		overflow: hidden;
		position: relative;
	}

	.meHeadAvatar {
		float: left;
		width: 19%;
		margin-top: 10upx;
	}


	.meHeadAvatar image {
		width: 110upx;
		height: 110upx;
		display: block;
		border-radius: 50%;
	}

	.meHeadName {
		float: left;
		width: 81%;
		line-height: 120upx;
		color: #FFFFFF;
		font-size: 28upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.meOverBg {
		background: #FFFFFF;
		overflow: hidden;
		border-radius: 12upx;
		margin-top: 30upx;
	}

	.meVisitor {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.meVisitor .left{
		margin-left: 10px;
	
	}
	
	.meVisitor .right{
		margin-right: 10px;
	
	}
	
     
	.meVisitorLt {
		width: 50%;
		text-align: center;
		margin: 30upx 0;
	}
     
	
	.meVisitorLt:nth-child(1) {
		border-left: 1px #F5F5F5 solid;
		border-right: 1px #F5F5F5 solid;
	}

	.meVisitorTxt_01 {
		font-size: 28upx;
		color: #666666;
	}

	.meVisitorTxt_01 image {
		width: 35upx;
		height: 35upx;
		vertical-align: middle;
		margin: 0 10upx 4upx 0;
	}

	.meVisitorTxt_02 {
		font-size: 30upx;
		color: #3B7ED5;
	}

	.meVisitorTitle {
		font-size: 30upx;
		color: #333333;
		padding: 20upx 30upx;
	}

	.meOrderLt {
		width: 45%;
		text-align: center;
		padding: 30upx 0;
		transition: all 0.4s;
	}
	
  .wd{
	  text-align: left;
	  text-indent: 10px;
	  border-radius: 5px;
  }
  
 .bg1{
	 background: url(../../static/icon/my_game_item4.png) 100% 100% no-repeat; 
	 background-size:100% 100%;
 }
 
 .bg2{
	 background: url(../../static/icon/my_game_item5.png) 100% 100% no-repeat; 
	 background-size:100% 100%;
 }
 
 .bg3{
 background: url(../../static/icon/my_game_item6.png) 100% 100% no-repeat;
 background-size:100% 100%;
 }
 
 .bg4{
 background: url(../../static/icon/my_game_item7.png) 100% 100% no-repeat;
 background-size:100% 100%;
 }
 
  .wd .meOrderTxt_02{
	  color: white;
  }
  .liu{
	  width: 29%;
	  text-indent: 40px;
	  border-radius: 5px;
	  box-shadow: 1px 1px 7px #999;
  }
 
 .bg5{
	background: url(../../static/icon/my_game_item1.png) 100% 100% no-repeat;
	background-size:100% 100%; 
 }

 .bg6{
	 background: url(../../static/icon/my_game_item2.png) 100% 100% no-repeat;
	 background-size:100% 100%;
 }
 
 .bg7{
 	background: url(../../static/icon/my_game_item3.png) 100% 100% no-repeat;
 	background-size:100% 100%; 
 }

	.meOrderLt:active {
		background: #E2E2E2;
	}

	.meOrderTxt_01 {}

	.meOrderTxt_01 image {
		width: 40upx;
		height: 40upx;
		display: block;
		margin: 0 auto 6upx;
	}

	.meOrderTxt_02 {
		font-size: 28upx;
		color: #666666;
	}

	.businessList {
		overflow: hidden;
		padding: 30upx;
		border-bottom: 1px #F5F5F5 solid;
		transition: all 0.4s;
	}

	.businessList:active {
		background: #E2E2E2;
	}

	.businessList:last-child {
		border-bottom: none;
	}

	.businessListTxt {
		float: left;
		font-size: 28upx;
		color: #333333;
	}

	.businessListTxt image {
		width: 35upx;
		height: 35upx;
		vertical-align: middle;
		margin: 0 10upx 4upx 0;
	}

	.businessListYou {
		float: right;
		font-size: 28upx;
		color: #333333;
	}

	.businessListYou image {
		width: 20upx;
		height: 20upx;
		vertical-align: middle;
		margin: 0 0 4upx 10upx;
	}
</style>
